

#g-pointer-1,
#g-pointer-2 {
    mix-blend-mode: exclusion;
    pointer-events: none;

}
#g-pointer-1,
#g-pointer-2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 12px;
    height: 12px;
    background: #999;
    border-radius: 50%;
    background-color: #d79d27;
    z-index: 9999999; 
}
#g-pointer-2 {
    width: 42px;
    height: 42px;
    background: #fff;
    transition: .15s ease-out;
}
@import url("https://fonts.googleapis.com/css2?family=Bangers&family=Homemade+Apple&family=Sacramento&display=swap");

html, body {
	width: 100%;
	height: 100%;
	display: flex;
	font-family: "Font2",sans-serif;
	background: #000;
  font-size: 30px;
}
p{
  font-family: "Font4",sans-serif;

  color: #93AAB4;
}
p:nth-child(2n){

color: #ce9b57;

}
svg {
	position: fixed;
	width: 600px;
	height: 300px;
	margin: auto;
	top: 0%;

	transform: translate(-50%, -50%);
}

svg text {
	text-transform: uppercase;
	letter-spacing: 3px;
	font-size: 50px;
	animation: stroke 5s infinite alternate;
}
@keyframes stroke {
	0% {
		fill: rgba(72, 138, 20, 0);
		stroke: rgba(54, 95, 160, 1);
		stroke-dashoffset: 25%;
		stroke-dasharray: 0 50%;
		stroke-width: 0.8;
	}
	70% {
		fill: rgba(72, 138, 20, 0);
		stroke: rgba(54, 95, 160, 1);
		stroke-width: 1.2;
	}
	85% {
		fill: rgba(72, 138, 20, 0);
		stroke: rgba(54, 95, 160, 1);
		stroke-width: 1.5;
	}
	95%,
	100% {
		fill: rgba(72, 138, 204, 1);
		stroke: rgba(54, 95, 160, 0);
		stroke-dashoffset: -25%;
		stroke-dasharray: 50% 0;
		stroke-width: 0;
	}
}

#g-scroll {
    width: 100vw;
    height: 300vh;
}

@supports (animation-timeline: works) {
    @scroll-timeline change {
			source: auto;
    	orientation: vertical;
    }
    
    #timelinetext {
				animation: stroke 5s both;
        animation-timeline: change;
    }
}
.card img{
  width:100%;
  height: 130px;
}